<template>
  <q-dialog
    square
    no-backdrop-dismiss
    position="standard"
    v-model="rolePermissionDialogVisible"
    @hide="$emit('handleFinish')"
  >
    <q-card style="width: 800px; max-width: 80vw">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">{{ row.role_name + $t("Permission") }}</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-tabs
        v-model="tab"
        dense
        class="text-grey"
        active-color="primary"
        indicator-color="primary"
        align="justify"
        narrow-indicator
      >
        <q-tab name="menu" :label="$t('Menu') + $t('Permission')" />
        <q-tab name="api" :label="$t('Api') + $t('Permission')" />
      </q-tabs>

      <q-separator />

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="menu">
          <role-permission-menu :row="row" v-if="tab === 'menu'" />
        </q-tab-panel>

        <q-tab-panel name="api">
          <role-permission-api :row="row" v-if="tab === 'api'" />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </q-dialog>
</template>

<script setup>
import RolePermissionMenu from "./RolePermissionMenu";
import RolePermissionApi from "./RolePermissionApi";
import { ref } from "vue";

const rolePermissionDialogVisible = ref(false);
const row = ref({});
const tab = ref("menu");
const show = (record) => {
  row.value = record;
  rolePermissionDialogVisible.value = true;
};
defineExpose({
  show,
});
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "RolePermissionDialog",
});
</script>
